import {View, Image, Text, Button, Input, ScrollView} from '@tarojs/components'
import {getCurrentInstance, hideHomeButton, navigateBack,switchTab, useShareAppMessage } from '@tarojs/taro'
import {useEffect, useState} from 'react'
import {IMG_URL} from '@/commons/constant'
import infoImg from '@/assets/commons/info.png'
import fenxiangImg from '@/assets/commons/fenxiang.png'
import chaImg from '@/assets/commons/cha.png'
import evaImg from '@/assets/commons/eva.png'
import ejImg from '@/assets/commons/ej.png'

import './index.scss'
export default props => {
  const [data, setData] = useState({})
  const [evaDask,setEvaDask] = useState(false)
  const [goodsDask,setGoodsDask] = useState(false)
  const [num, setNum] = useState(1)
  useShareAppMessage()
  useEffect(() => {
    hideHomeButton({})
    let data = getCurrentInstance().router.params
    data = JSON.parse(data.data)
    console.log(data);
    setData(data)
  }, [])
  
  const Dask = props => {
    return (
      <View className="dask">
        <Image src={chaImg} className="cha" onClick={() => props.hideDask()}/>
        {props.children}
      </View>
    )
  }
  const Eva = evaProps => {
    return (
      <View className="eva">
        <View>购买评价{3} <Text>销量 {21}</Text></View>
        <ScrollView 
          className="evaWrap"
          scrollWithAnimation 
          scrollTop	= {0}
          scrollY>
          <View className="evaItem">
            <Image />
            <View className="evaCont">
              <Text>像个孩子简简单单Riva</Text>
              <View>很好看</View>
              <View>04/01 14:00 颜色:黑色两件套 尺码:M</View>
            </View>
          </View>
          <View  className="evaItem">
            <Image  />
            <View className="evaCont">
              <Text>像个孩子简简单单Riva</Text>
              <View>很好看</View>
              <View>04/01 14:00 颜色:黑色两件套 尺码:M</View>
            </View>
          </View>
          <View  className="evaItem">
            <Image  />
            <View className="evaCont">
              <Text>像个孩子简简单单Riva</Text>
              <View>很好看</View>
              <View>04/01 14:00 颜色:黑色两件套 尺码:M</View>
            </View>
          </View>
          <View  className="evaItem">
            <Image  />
            <View className="evaCont">
              <Text>像个孩子简简单单Riva</Text>
              <View>很好看</View>
              <View>04/01 14:00 颜色:黑色两件套 尺码:M</View>
            </View>
          </View>
          <View  className="evaItem">
            <Image  />
            <View className="evaCont">
              <Text>像个孩子简简单单Riva</Text>
              <View>很好看</View>
              <View>04/01 14:00 颜色:黑色两件套 尺码:M</View>
            </View>
          </View>
          <View  className="evaItem">
            <Image  />
            <View className="evaCont">
              <Text>像个孩子简简单单Riva</Text>
              <View>很好看</View>
              <View>04/01 14:00 颜色:黑色两件套 尺码:M</View>
            </View>
          </View>
        </ScrollView>
      </View>
    )
  }
  const BuyGoods = goodsProsp => {
    return (
      <View className="buy-goods">
        <View className="info">
          <Image src={IMG_URL + data.img} />
          <View>
            <Text>TiMi米米推荐</Text>
            <View className="title">{data.title}</View>
            <View className="info-last">
              <Text>￥{data.price}</Text>
              <View>
                <Image src={evaImg} />评论3
                <Image src={ejImg} />客服
              </View>
            </View>
          </View>
        </View>
        <View 
          scrollWithAnimation 
          scrollTop	= {0}
          className="config"
          scrollY>
          <View>
            <Text>颜色</Text>
            <View><Button>杏色两件套</Button><Button>黑色两件套</Button></View>
          </View>
          <View>
            <Text>尺码</Text>
            <View><Button>S</Button><Button>M</Button><Button>L</Button><Button>XL</Button></View>
          </View>
          <View className="num">
            <Text>数量</Text>
            <View>
              <Button> - </Button>
              <Input value={num} type="number" onBlur={e => setNum(e.detail.value) } />
              <Button> + </Button>
            </View>
          </View>
        </View>
        <View>
          <Button>加入购物车</Button>
          <Button>立即购买</Button>
        </View>
      </View>
    )
  }

  return (
    <View className="detail">
      <Image className="bgImg" src={IMG_URL + data.img} />
      <View className="detail-cont">
        <View className="navbar">
          <Text className="back" onClick={() => navigateBack()}>{'<'}</Text>
          <View className="hot" onClick={() => switchTab({url: '/pages/broad/broad'})}>热门直播 {' >'}</View>
        </View>
        <View className="goods" onClick={() => setGoodsDask(true)}>
          <Image className="img" src={IMG_URL + data.img} />
          <View className="right">
            <Text className="title">{data.title}</Text>
            <View className="last">
              <Text className='price'>￥ {data.price}</Text>
              <Button className="btn">去购买</Button>
            </View>
          </View>
        </View>
        <View className="slide">  
          <View onClick={() => setEvaDask(true)}>
            <Image src={infoImg} />
            <View>买家评价</View>
            <Text>4</Text>
          </View>
          <Button openType="share" plain>
            <Image src={fenxiangImg} />
            <View>分享</View>
          </Button>
        </View>
        {evaDask && <Dask hideDask={() => setEvaDask(false)}> <Eva></Eva> </Dask>}
        {goodsDask && <Dask hideDask={() => setGoodsDask(false)}> <BuyGoods></BuyGoods> </Dask>}
      </View>
    </View>
  )
}